<template>
  <div>
    <el-container>
      <el-header height="140px">
        <div class="loginhead">
          <div class="Qcenter">
            <div class="loginimg">
              <el-image src="images/Logo1.png" fit="contain"></el-image>
            </div>
          </div>
        </div>
      </el-header>
      <div class="mainbody">
        <el-main height="auto">
          <!-- Main content -->
          <div class="loginbackground">
            <div class="Qcenter">
              <div class="logindiv">
                 <h4>用户登录</h4>
                <div class="loginform">
                 
                  <el-form
                    :model="user"
                    ref="form"
                   
                    label-width="80px"
                    :inline="false"
                    size="normal"
                  >
                    <el-form-item label="用户名：">
                      <el-input v-model="user.name" placeholder="请输入用户名" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码：">
                      <el-input v-model="user.pwd" placeholder="请输入密码" show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                      <router-link to="/index"
                        ><el-button 
                          >登录</el-button
                        ></router-link
                      >
                      
                    </el-form-item>
                    <div class="linkreg">
                      <router-link to="/register" >我要注册>></router-link>
                      
                    </div>
                  </el-form>
                </div>
                <div class="loginfooter">
                  <div class="fl">在线申请</div>
                  <div class="fr">申请查询</div>
                </div>
              </div>
            </div>
          </div>
        </el-main>
        <el-footer height="">
          <!-- Footer content -->

        </el-footer>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "",
        pwd: "",
      },
    };
  },
};
</script>

<style>
.loginhead {
  position: relative;
  height: 140px;
  background-image: url("/images/logintop.jpg");
  background-position: center;
}
.loginimg {
  position: absolute;
  top: 50%;

  margin-top: -35px;
}
.el-header {
  padding: 0px !important;
}
.mainbody {
  border: none;
}
.mainbody .el-main {
  margin: 0px;
  padding: 0px;
}
.loginbackground {
  height: 400px;
  width: 100%;
  background-image: url("/images/signimg.jpg");
  background-position: center;
  background-size: cover;
}
.logindiv {
  width: 338px;
  height: 309px;
  float: right;
  background: #e7f2fa;
  margin-top: 24px;
}
.logindiv h4 {
  text-align: center;
  line-height: 30px;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}
.loginform{
  color: black;
  width: 300px;
  height: 185px;
  margin: 12px auto;
}
.loginform .el-form-item{
  margin-bottom: 11px;
  height: 44px;
}
.loginform .el-input{
  border: solid 1px #BFBFBF;
}
.loginform .el-button{
width:100%;
background-color:#3F85ED;
border-radius: 0px;
color: white;
height: 44px;
}
.Qcenter {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.loginfooter{
height: 60px;
    line-height: 60px;
    overflow: hidden;
}
.fl{
  width:50%;
  text-indent: 70px;
  background: #32b16c url(/images/Qicon1.png) no-repeat 37px center;
  float: left;
  font-size: 16px;
    color: #fff;
    font-weight: bold;
}
.fr{
  width:50%;
  text-indent: 70px;
  background: #f19149 url(/images/Qicon2.png) no-repeat 37px center;
  float: right;
  font-size: 16px;
    color: #fff;
    font-weight: bold;
}
.linkreg{
 float: right;
    font-size: 14px;
    color: #3f85ed ;
    font-weight: bold;
    line-height: 30px;
}
</style>